<template>
  <div class="passage">
    <van-loading
      size="39px"
      vertical
      type="spinner"
      v-if="!detail.horizontal_cover"
      >加载中...</van-loading
    >
    <div v-else>
      <div class="header">
        <span
          class="iconfont icon-zuojiantou"
          @click="$router.push('/')"
        ></span>
        <h2>熊猫漫画</h2>
        <span></span>
      </div>
      <div class="img">
        <!-- <img :src="detail.horizontal_cover" alt="" /> -->
        <van-image lazy-load :src="detail.horizontal_cover" />
        <div class="text">
          <h3>{{ detail.title }}</h3>
          <span v-if="detail.author_name"
            >作者: {{ detail.author_name[0] }}</span
          >
        </div>
      </div>
      <div class="read">
        <div class="left">
          <van-icon name="star" size="25" :class="{ active: isTuck }" />
          <!-- <span class="iconfont icon-shoucang" :class="{active:isTuck}"></span> -->
          <p
            @click="
              zhuimanAdd();
              isCollect();
            "
            v-if="!isTuck"
          >
            追漫
          </p>
          <p
            @click="
              zhuimanRemove();
              isCollect();
            "
            v-else
          >
            已追
          </p>
        </div>
        <div class="persual" @click="todatail(last_ep_id || epList[0].id)">
          看 {{ last_ep?.short_title || epList[0].short_title }} 话
        </div>
      </div>
      <div class="brief">
        <h3 v-if="detail.is_finish == 0">连载中</h3>
        <h3 v-else>完结</h3>
        <p>
          {{ detail.classic_lines }}
        </p>
      </div>
      <div class="list">
        <div class="all">
          <h3>全部章节({{ detail.ep_list?.length }})</h3>
          <div class="up" v-if="isOrder" @click="order">
            <p>升序</p>
            <img
              src=""
              alt=""
            />
          </div>
          <div class="down" v-else @click="order">
            <p>降序</p>
            <img
              src=""
              alt=""
            />
          </div>
        </div>
        <div class="chapter">
          <div
            class="item"
            v-for="(item, index) in epList"
            :key="index"
            @click="todatail(item.id)"
          >
            {{ item.short_title }}
          </div>
          <div
            class="item"
            v-if="isSlice && detail.ep_list?.length >= 7"
            @click="changeIsSlice"
          >
            ...
          </div>
        </div>
      </div>
      <!-- 评论 -->
      <div class="discuss">
        <h3>评论区({{ discussList.length }})</h3>
        <div class="context">
          <div
            class="content"
            v-for="discuss in discussList"
            :key="discuss.rpid"
          >
            <div class="avatar">
              <img :src="discuss.member.avatar" alt="" />
              <div class="username">
                <span>{{ discuss.member.uname }}</span>
                <span>{{ discuss.reply_control.time_desc }}</span>
              </div>
            </div>
            <div class="text">
              <div class="comment">
                {{ discuss.content.message }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="sell">
        <h3>猜你喜欢</h3>
        <div>
          <div
            class="item"
            v-for="result in sellList"
            :key="result.season_id"
            @click="gotoPassage(result.id)"
          >
            <div class="img">
              <!-- <img :src="result.vertical_cover" alt="" /> -->

              <van-image :src="result?.vertical_cover">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
            <h3>{{ result.title }}</h3>
            <div class="replace">
              <span class="topic"
                >更新至:&nbsp;第{{ result.last_ord }}话 &nbsp;{{
                  result.bottom_info
                }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detail: [],
      isSlice: true, //切换展开列表
      epList: [],
      last_ep: null,
      last_ep_id: null,
      epid: null,
      collectList: JSON.parse(localStorage.getItem("collectList")) || [],
      isTuck: false, //切换追漫
      isOrder: true, //切换排序
      sellList: [],
      comic_id: this.$route.query.id,
      discussList: [],
    };
  },
  methods: {
    changeIsSlice() {
      this.isSlice = false;
      this.epList = this.detail.ep_list;
    },

    todatail(id) {
      // console.log(this);
      this.$router.push({
        path: "details",
        query: { commicId: this.$route.query.id, epid: id },
      });
      console.log(id);
    },

//追漫
    zhuimanAdd() {
      // if (!this.collectList.indexOf(this.detail.id)) {
      // console.log(this.collectList);
      // }
      if (localStorage.getItem("token")) {
        this.collectList = [...this.collectList, this.detail];
        localStorage.setItem("collectList", JSON.stringify(this.collectList));
        // console.log(111);
      } else {
        this.$router.push("/login");
      }
    },
    //取消追漫
    zhuimanRemove() {
      this.collectList.splice(
        this.collectList.findIndex((item) => item.id == this.detail.id),
        1
      );
      window.localStorage.setItem(
        "collectList",
        JSON.stringify(this.collectList)
      );
    },

    isCollect() {
      // console.log(this.detail.id);
      // console.log(this.collectList);

      // console.log(this.collectList.findIndex((o) => o.id == this.detail.id));

      if (this.collectList.findIndex((o) => o.id == this.detail.id) != -1) {
        // console.log("true");
        this.isTuck = true;
      } else {
        // console.log("false");
        this.isTuck = false;
      }
    },
    //排序
    order() {
      if (this.isOrder) {
        this.isOrder = false;
        if (this.isSlice) {
          this.epList = this.detail.ep_list.reverse().slice(0, 7);
        } else {
          this.epList = this.detail.ep_list.reverse();
        }
      } else {
        this.isOrder = true;
        if (this.isSlice) {
          this.epList = this.detail.ep_list.reverse().slice(0, 7);
        } else {
          this.epList = this.detail.ep_list.reverse();
        }
      }
    },
    //跳转
    gotoPassage(comic_id) {
      this.comic_id = comic_id;
      this.$router.push({
        path: "/passage",
        query: {
          id: comic_id,
        },
      });
    },
  },
  created() {
    // this.comic_id = this.$route.query.id;
    if (JSON.parse(localStorage.getItem("history"))) {
      this.last_ep_id = JSON.parse(localStorage.getItem("history"))[
        this.$route.query.id
      ];
    }

    this.axios
      .get(`/ComicDetail?comicId=${this.$route.query.id}`)
      .then((res) => {
        this.detail = res.data.data;
        this.last_ep = res.data.data.ep_list.find(
          (o) => o.id == this.last_ep_id
        );
        this.epList = this.detail.ep_list.reverse().slice(0, 7);
        // console.log(this.detail);
        if (this.collectList.findIndex((o) => o.id == this.detail.id) != -1) {
          this.isTuck = true;
        }
      });

    this.axios
      .get(`https://apis.netstart.cn/bcomic/ReplyMain?oid=${this.comic_id}`)
      .then((res) => {
        this.discussList = res.data.data.replies;
        console.log(this.discussList);
      });

    //猜你喜欢
    this.axios.get(`MoreRecommend?comicId=${this.comic_id}`).then((res) => {
      // console.log(res);
      this.sellList = res.data.data.recommend_comics.slice(0, 6);
    });
  },
  watch: {
    comic_id: function (newValue, oldValue) {
      console.log(newValue, oldValue);
      this.axios
        .get(`/ComicDetail?comicId=${this.$route.query.id}`)
        .then((res) => {
          this.detail = res.data.data;
          this.last_ep = res.data.data.ep_list.find(
            (o) => o.id == this.last_ep_id
          );
          this.epList = this.detail.ep_list.reverse().slice(0, 7);
          // console.log(this.detail);
          if (this.collectList.findIndex((o) => o.id == this.detail.id) != -1) {
            this.isTuck = true;
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.passage {
  padding-bottom: 20px;
  .header {
    height: 50px;
    padding: 0px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 22px;
      color: #333;
    }
    h2 {
      font-size: 18px;
    }
  }
  .img {
    width: 100%;
    height: 208px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .text {
      position: absolute;
      bottom: 10px;
      left: 12px;
      h3 {
        font-size: 18px;
        color: #fff;
      }
      span {
        font-size: 12px;
        color: #fff;
        margin-top: 10px;
      }
    }
  }
  .read {
    margin-top: 10px;
    padding: 0px 12px;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      align-items: center;
      .van-icon {
        color: #999;
      }
      .active {
        color: #fc5253;
      }
      p {
        font-size: 18px;
        color: #333;
        margin-left: 5px;
      }
    }
    .persual {
      // width: 210px;
      height: 45px;
      padding: 0px 40px;
      line-height: 45px;
      border-radius: 25px;
      text-align: center;
      font-size: 14px;
      color: #fff;
      background-color: #fc5253;
    }
    .icon-shoucang {
      font-size: 24px;
      margin-right: 5px;
    }
  }
  .brief {
    padding: 15px 12px;
    h3 {
      font-size: 16px;
      color: #333;
      margin-bottom: 10px;
    }
    p {
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: 12px;
      color: #666;
    }
  }
  .list {
    padding: 20px 12px;
    margin-bottom: 10px;
    .all {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .up,
      .down {
        display: flex;
        align-items: center;
        img {
          width: 16px;
          height: 16px;
        }
      }
    }
    h3 {
      font-size: 16px;
      color: #333;
    }
    .chapter {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      .item {
        margin-right: 10px;
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: 2px solid #999;
        border-radius: 3px;
        color: #333;
        font-size: 14px;
        margin-top: 5px;
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
  }
  .discuss {
    padding: 0 12px;
    .context {
      height: 130px;
      white-space: nowrap;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .content {
        white-space: nowrap;
        display: inline-block;
        width: 230px;
        height: 125px;
        border: 1px solid #999;
        padding: 12px;
        margin-right: 20px;
        .avatar {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
          }
          .username {
            display: flex;
            flex-direction: column;

            span {
              font-size: 12px;
              color: #999;
            }
          }
        }
        .text {
          margin-top: 10px;

          .comment {
            width: 100%;
            height: 60px;
            display: flex;
            white-space: pre-wrap;
            font-size: 14px;
            color: #333;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    h3 {
      color: #333;
      margin-bottom: 10px;
      font-size: 16px;
    }
  }
  .sell {
    padding: 20px 12px;
    h3 {
      font-size: 16px;
      color: #333;
      // margin-bottom: 10px;
    }
    div {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      // padding-bottom: 50px;
    }

    .item {
      width: 30%;
      padding: 10px 0px;
      //   margin-right: 5px;
      .img {
        // width: 100%;
        height: 150px;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      h3 {
        font-size: 14px;
        color: #333;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: bold;
        height: 32px;
        line-height: 32px;
      }
      .replace {
        width: 100%;
        display: flex;
        color: #666;
        font-size: 12px;

        .topic {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .van-loading--vertical {
    margin-top: 300px;
    // position: fixed;
    // top: 200px;
  }
}
</style>